<template>
  <div>
    <div class="menu">
      <div class="menu-left">
        <ul>
          <li
            class="menu-item"
            v-for="(menu, index) in menus"
            :key="index"
            :class="{ current: index === currentIndex }"
            @click="clickList(index)"
          >
            <p class="text">{{ menu.name }}</p>
          </li>
        </ul>
      </div>

      <div class="menu-right" ref="itemList">
        <ul>
          <li class="cate" v-for="(menu, index1) in menus" :key="index1">
            <h4 class="cate-title">{{ menu.name }}</h4>
            <ul class="cate-item">
              <li v-for="(item, index2) in menu.sub" :key="index2">
                <a href="#" class="cate-item-wrapper">
                  <router-link class="cate-item-wrapper" :to="{name: 'goods_list', params: {category_id: item.id}}">
                  <div class="cate-item-img">
                    <img :src="item.image" alt="" />
                  </div>
                  <span>{{ item.name }}</span>
                  </router-link>
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
ul {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
.menu {
  display: flex;
  position: absolute;
  text-align: center;
  top: 40px;
  bottom: 50px;
  width: 100%;
  overflow: hidden;
  .menu-left {
    flex: 0 0 80px;
    width: 80px;
    background: #f3f5f7;
    .menu-item {
      height: 54px;
      width: 100%;
      .text {
        width: 100%;
        line-height: 54px;
        margin-bottom: 0;
      }
    }
    .current {
      width: 100%;
      background: #fff;
      .text {
        color: red;
      }
    }
  }
  .menu-right {
    flex: 1;
    background: #fff;
    .cate  {
      height: 100%;
          .cate-title  {
        margin: 0;
        text-align: left;
        font-size: 14px;
        color: #333;
        font-weight: bold;
        padding: 10px;
      }
          .cate-item  {
        padding: 7px 10px 10px;
        display: flex;
        overflow: hidden;
        flex-flow: row wrap;
              li  {
          width: 33.3%;
                  .cate-item-wrapper  {
                      .cate-item-img  {
              width: 100%;
                          img  {
                width: 70px;
                height: 70px;
              }
            }
                      span  {
              display: inline-block;
              font-size: 14px;
              color: #333;
            }
          }
        }
      }
    }
  }
}
</style>
<script>
import BScroll from "better-scroll";
export default {
  data() {
    return {
      menus: [],
      //记录用户点击的一级分类索引
      currentIndex: 0,
      rightLiTops: [], // 右菜单每项的高度
    };
  },
  watch: {
    menus() {
      // $nextTick函数会在页面渲染完成之后进行调用，用来在下次DOM更新循环结束之后执行延迟回调
      this.$nextTick(() => {
        this._initBScroll(); // 初始化better-scroll
        this._initRightHeight(); // 初始化右边菜单的高度，记录右边每个二级分类每个小盒子的高度
      });
    },
  },
  methods: {
    clickList(index) {
      this.currentIndex = index; //根据索引，去定位右侧盒子的定位值，scrollTo(x, y, time, easing)
      this.rightBscroll.scrollTo(0, -this.rightLiTops[index]);
    },
    // 初始化better-scroll
    _initBScroll() {
      this.leftBscroll = new BScroll(".menu-left", {
        click: true,
        mouseWheel: true,
      });
      this.rightBscroll = new BScroll(".menu-right", {
        click: true,
        mouseWheel: true,
        probeType: 3, // 同时监听鼠标拖动和鼠标中轮的滚动
      });
      //添加一段代码监听二级分类滚动区域的滚动事件，pos是滚动的位置
      this.rightBscroll.on("scroll", (pos) => {
        window.console.log(pos.y);
        const scrollY = Math.abs(pos.y);
        for (var i = 0; i < this.rightLiTops.length - 1; i++) {
          if (
            scrollY >= this.rightLiTops[i] &&
            scrollY < this.rightLiTops[i + 1]
          ) {
            this.currentIndex = i;
          }
        }
      });
    },
    // 初始化右边菜单的高度
    _initRightHeight() {
      //保存每个二级分类盒子的定位值
      let itemArray = [];
      //初始化第1个盒子的定位值
      let top = 0;
      //将第1个二级分类的定位值加入到数组中
      itemArray.push(top);
      //获取所有的二级分类盒子
      let allList = this.$refs.itemList.getElementsByClassName("cate");
      //记录每个元素的高度
      for (var i = 0; i < allList.length; i++) {
        top += allList[i].clientHeight;
        itemArray.push(top);
      }
      this.rightLiTops = itemArray;
    },
  },
  created() {
    this.$indicator.open({
      text: "加载中",
    });
    this.$http.get("category").then((res) => {
      this.$indicator.close();
      this.menus = res.data.data;
    });
  },
};
</script>


